<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>礼品换积分</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <style>
    html {
      font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      height: 100%;

    }

    body {
      overflow-x: hidden;
      text-align: center;
    }

    .title{
      margin: 0.4rem 0;
    }

    .dataDiv{
      width: 72%;
      margin: 0 auto;
      background-color: white;
      border-radius: 0.2rem;
      border: 1px solid rgba(0, 0, 0, 0.36);
      padding: 0.2rem 0 0.2rem;
    }

    .dataDiv p{
      margin: 0;
    }

    .dataDiv img{
      width:1.2rem;
      height:1.2rem;
      /*width:40px;*/
      /*height:40px;*/
    }
    .dataList{
      width: 100%;
      overflow: hidden;
    }
    .dataList>div{
      width: 3rem;
      margin-left: 0.13rem;
      float: left;
      margin-top: 0.3rem;
    }







  </style>
</head>

<body style="height: 100%;width: 100%;position: absolute;top:0;bottom: 0">
<div class="mui-content" id="app" style="position: relative;min-height: 100%">

  <div class="title">
    <p>第一步：选择设备类型</p>
  </div>
  <div class="mui-row dataList" style="padding-bottom: 1rem">
    <div v-for="(item,index) in originalData"  class="mui-col-sm-6 mui-col-xs-6"  @click="toProgramme(item)">
      <div class="dataDiv">
        <img :src="config.imgPath + item.icon" alt="图片">
        <!--<img src="../../images/logo_03.png" alt="">-->
        <p>{{item.name}}</p>
      </div>
    </div>



  </div>
  <p style="color:#5677FC;width: 100%;text-align: center;position: absolute;bottom: 0.5rem" @click="toJournal">
    兑换日志
  </p>



</div>
<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var vm = new Vue({
    el: '#app',
    data: {
      ifShow: true,
      currentShopObj: {},
      originalData:'',
    },
    created: function() {
      mui.init()
      mui.plusReady(function() {
        vm.receiveParams()
      })
    },
    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview()
        this.currentShopObj = self.currentShopObj;
        console.log(JSON.stringify(this.currentShopObj))
        this.localData();
      },


      localData:function(){
        var  vm=this
        config.ajax({
          url: '/mcard/item/get',
          data: {
            "page":1,
            "pageSize":1000,
          },
          success: function(res) {
            console.log("data:"+JSON.stringify(res.data.data));
            if(res.result ===1){
              vm.originalData=res.data.data;
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function (res) {
            mui.toast(res.errormsg)
          }
        })
      },
      toProgramme:function(item){
        mui.openWindow({
          url: './programme.html',
          id: 'programme',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '卡片存积分',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          createNew:true,  //再次进入页面重新创建  解决mui.plusReady 2次进入 不执行问题
          extras: {
            currentShopObj: this.currentShopObj,
            classInfo:item,
          }
        })
      },
      toJournal:function(){
        mui.openWindow({
          url: '../cardJournal.html',
          id: 'cardJournal',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '兑换日志',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          createNew:true,  //再次进入页面重新创建  解决mui.plusReady 2次进入 不执行问题
          extras: {
            currentShopObj: this.currentShopObj,
          }
        })
      }
    }
  })

</script>
</body>

</html>